import { defineComponent, h } from 'vue';
import { Tooltip, Dropdown } from 'ant-design-vue';
import {AlignCenterOutlined,AlignLeftOutlined,AlignRightOutlined} from '@vicons/antd';
 
let textmap = {
  'left': '左对齐',
  'right': '右对齐',
  'center': '居中', 
}
let textmapicon = {
  'center':AlignCenterOutlined,
  'left': AlignLeftOutlined,
  'right':AlignRightOutlined, 
}
 
export default defineComponent({
  name: 'aad',
  props: ['icon', 'type', 'Active', 'editor', 'title', 'color'],
  setup(props, { slots }) {
    const changeColorFun = (e) => {
      props?.editor.chain().focus().toggleHighlight({ color: e }).run()
    }
    // 对齐事件
    const onTextAlfinFun = (e) => {
      props?.editor.chain().focus().setTextAlign(e).run()
    }
    // 字体
    const fontfamily = (e) => {
      props?.editor.chain().focus().setFontFamily(e).run()
    }
    if (props.type == 'fontfamily'){
      return () => <div class='Fonttype'>
        <Dropdown v-slots={
          {
            'menus': () => (<div class='Fonttypelists'>
              {props.color.map((item) => <span onClick={
                () => fontfamily(item)} class={{ 'is-active': props?.editor.isActive('textStyle', { fontFamily: item }) }}>{item}</span>)}</div>)
          }
        }>
          <button class={{ 'is-active': props?.editor.isActive(props.type), 'menus': true }}>
            <i class={['tool-icon']}>{h(props.icon)}</i>
          </button>
        </Dropdown>
      </div>
    }
    // 问题： table 表格如果受浏览器兼容问题
    // 对齐渲染
    if (Object.prototype.toString.call(props.type) == '[object Array]') {
      return () => <div class='textalgins'>{props.type.map((item) => (
        <Tooltip title={textmap[item]} placement='bottom'>
          <button onClick={() => onTextAlfinFun(item)} class={{ 'is-active': props?.editor.isActive(item) }}>
            <i class={['tool-icon']}>{h(textmapicon[item])}</i>
          </button >
        </Tooltip>
      ))}</div>
    }
    return () => props?.color.length > 0 ? (<div class='liginColor'>
      <Dropdown v-slots={
        {
          'overlay': () => (<div class='liginColorlists'>{props.color.map((item) => <span onClick={() => changeColorFun(item)} class={{ 'is-active': props?.editor.isActive('highlight', { color: item }) }} style={{ background: item }}></span>)}</div>)
        }
      }>
        <button class={{ 'is-active': props?.editor.isActive(props.type), 'menus': true }}>
          <i class={['tool-icon']}>{h(props.icon)}</i>
        </button>
      </Dropdown>
    </div>) : (
      <div>
        <Tooltip title={props.title} placement='bottom'>
          <button class={{ 'is-active': props?.editor.isActive(props.type) }}>
            <i class={['tool-icon']}>{h(props.icon)}</i>
          </button >
        </Tooltip>
      </div>
    )
  }
})